<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("img").click(function () {
                // animate:在指定毫秒数内改变元素所在的位置
                // 只需要给定改变的位置的参数
                // 本身是left:0px,top:0px
                // 如果需要改为:left:1500px,top:0px
                // 则此时只需要给定改变的left的值即可
                // animate方法可以无限调用
                // 每调用一次,改变一次
                $(this).animate({"left": "1500"}, 500)
                    .animate({"left":"750px",top:"650px"},500)
                    .animate({"left":"0px",top:"0px"},500);
                // 所有的jquery事件,均可以传递参数或者不传递参数
                // 如果传递参数,表示触发事件之后做什么
                // 如果不传递参数,表示通过代码触发事件
                // 此处即为通过代码实现点击当前元素的效果
                $(this).click();
            });
        });
    </script>
</head>
<body>
<img src="../images/heihei.gif" alt="图片加载失败" style="position: relative;left: 0px;top: 0px;">
</body>
</html>